<template>
	<view :style="headerStyle">
		<view class="header" :style="{ height: navHeight + 'px', paddingTop: statusBarHeight + 'px' }">
			<!-- <u-status-bar></u-status-bar> -->
			<view class="head">
				<image src="/static/icon_back.svg" mode="widthFix" class="back" 
				v-if="isBack" @click="back"></image>
				<slot name="haed"/>
			</view>
		</view>
		<view class="allheight" v-if="!hideHeight" :style="{ height: navHeight + 'px', paddingTop: statusBarHeight + 'px' }"></view>
	</view>
	
</template>

<script>
	export default {
		name:"fixedheader",
		props: {
			headerStyle: {
				type: Object,
				default: ()=>({})
			},
			isBack: {
				type: Boolean,
				default: true
			},
			hideHeight: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				navHeight: "",
				statusBarHeight: '',
				 
				 
			}
		},
		mounted() {
			 
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
			this.navHeight = this.statusBarHeight + (systemInfo.system.indexOf('iOS') > -1 ? 44 : 48);
		}, 
		methods: {
			back(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.header{
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: transparent;
	z-index: 999;
	 
	.head{
		width: 100%;
		height: 100%;
 		display: flex;
		align-items: center;
		margin: 0;
		padding: 0;
		box-sizing: content-box;
		.back{
			width: 60rpx;
			padding-left: 20rpx;
		}
	}
}
.allheight{
	width: 100%;
	height: calc(var(--status-bar-height) + var(--nav-height));
}
</style>
